<template>
    <el-dialog v-model="DialogShow" width="30%" title="题目信息" center custom-class="custom_class ">
        <div class="main">
            <!-- 题目 -->
            <div class="title">
                <span>题目：{{ previewItem.questionContent }}</span>
                <span>（{{ previewItem.score }}分）</span>
            </div>
            <div class="determine_item" v-for="item in previewItem.optionsInfoDtos" :key="item.options">
                <span class="determine_item_option">{{ item.options }}.</span>
                <span class="determine_item_content">{{ item.optionsContent }}</span>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="DialogShow = false">取消</el-button>
                <el-button type="primary" @click="DialogShow = false"> 确定 </el-button>
            </span>
        </template>

    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';


const props = defineProps(['show', 'previewItem'])
const emit = defineEmits(['update:show'])

const DialogShow = ref(false)
watch(() => props.show, (newVal) => {
    console.log(newVal, 'newVal');
    if (!newVal) {

    }
    DialogShow.value = newVal;
});
watch(() => DialogShow.value, (newVal) => {
    emit('update:show', newVal);
});



</script>

<style lang="scss">
.determine,

.determine_item {
    display: flex;
    align-items: center;
    margin: 15px 0;

    .determine_item_option {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        /* margin-top: 10px; */
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .determine_item_btn {
        display: flex;
        align-items: center;
        margin-left: 50px;
    }

    .determine_item_content {
        font-size: 14px;
        color: #333;
        /* margin-top: 10px; */
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
}
</style>